<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="./lib/react.js"></script>
    <script src="./lib/react_dom.js"></script>
    <script src="./lib/babel.js"></script>
    <script type="text/babel">
      class App extends React.Component {
        constructor() {
          super();
          // 参与组件更新的数据，要放在state中
          this.state = {
            message: "hello world",
            name: "why",
            age: 12,
          };

          // 对需要绑定的方法，提前绑定this
          this.bntClick = this.bntClick.bind(this);
        }

        // 组件方法（实例方法）
        bntClick() {
          console.log("this", this);
          // 内部完成两件事：1.将state中message修改掉，2.自动重新执行render()函数
          this.setState({
            message: "hello React",
          });
        }

        render() {
          const { message } = this.state;
          return (
            <div>
              <h2>{message}</h2>
              {/* <button onClick={this.bntClick.bind(this)}>修改文本</button> */}
              <button onClick={this.bntClick}>修改文本</button>
            </div>
          );
        }
      }

      // 使用class创建的类，默认采用严格模式，在严格模式下，this默认指定undefined
      /* const app = new App();
      const foo = app.bntClick;
      foo(); */

      // 在非严格模式下，this默认指向window，但是这里会先进一步转换为babel，在babel中this指向为undefined
      /* function bar() {
        console.log("bar:", this);
      }
      bar(); */
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(<App />);
    </script>
  </body>
</html>
